<template>
	<div class="j-cascader">
		<el-cascader
			:options="options"
			:collapse-tags="collapseTags"
			:collapse-tags-tooltip="collapseTagsTooltip"
			:clearable="clearable"
			:placeholder="placeholder"
			:filterable="filterable"
			:disabled="disabled"
			v-model="formParam[column.prop]"
			:props="props.props"
			@change="changeForm"
		/>
	</div>
</template>

<script setup lang="ts">
import type { CascaderProps, CascaderOption } from 'element-plus';
import { FromBoxProps } from '@/components/FormBox/interface';
interface Cascader {
	options: CascaderOption[];
	props?: Partial<CascaderProps>;
	disabled?: boolean;
	filterable?: boolean;
	clearable?: boolean;
	collapseTags?: boolean;
	showAllLevels?: boolean;
	placeholder?: string;
	collapseTagsTooltip?: boolean;
	formParam: { [key: string]: any }; // 提交参数
	column: FromBoxProps | any;
	changeForm?: (val?: any) => void;
}
const props = withDefaults(defineProps<Cascader>(), {
	options: () => []
});
</script>

<style lang="scss" scoped>
.j-cascader {
	width: 100%;
	:deep(.el-cascader) {
		width: 100%;
	}
}
</style>
